<template>
	<view class="content">
		<view class="search-block">
			
		</view>
		<view class="category">
			<view class="first-category-block category-block">
				<view :key="item.id" v-for="(item,index) in category" :class="menuActive==item.id?'active':''"
					@click="changeMenuActive(item)" class="menu-item">{{item.jobTitle}}</view>
			</view>
			<view class="second-category-block category-block">
				<view class="item-list-block" :key="item.id" v-for="(item,index) in currentChild">
					<view class="title">{{item.jobTitle}}</view>
					<view class="item-block">
						<view :key="item1.id" v-for="(item1,index1) in item.subLevelModelList"
							:class="selectedObj[item1.id]?'active':''" @click="changeMenuSelected(item1)"
							class="menu-item">{{item1.jobTitle}}</view>
					</view>
				</view>

			</view>
		</view>
		<view class="btn-block">
			<view class="total-block">
				<view class="total">已选({{Object.keys(selectedObj).length}})</view>
				<view class="total-show">
					<view class="box">
						<view class="total-item" :key="item.id" v-for="(item,index) in selectedObj">{{item.jobTitle}}
						</view>
					</view>
				</view>
			</view>
			<view class="btn-content">
				<view class="btn cancel" @click="goBack">取消</view>
				<view class="btn confirm" @click="handleSave">确定 {{Object.keys(selectedObj).length}}/{{max}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getJobCategory
	} from '@/api/config.js';
	import {
		multipleChoiceChangeObj
	} from '@/util/util.js'
	export default {
		data() {
			return {
				category: [],
				currentChild: null,
				menuActive: null,
				selectedObj: {},
				max: 7,
				selectIds:[],
			}
		},
		methods: {
			changeMenuActive(menu) {
				this.menuActive = menu.id
				this.currentChild = menu.subLevelModelList
			},
			changeMenuSelected(item) {
				multipleChoiceChangeObj('selectedObj', item, this, this.max)
			},
			goBack() {
				uni.navigateBack()
			},
			handleSave() {
				let copy = JSON.parse(JSON.stringify(this.selectedObj));
				let data = [];
				Object.keys(copy).forEach(key => {
					data.push(copy[key])
				})
				if (data.length === 0) {
					this.showToast('请至少选择一个！');
				} else {
					uni.$emit('getJobCategory', data);
					uni.navigateBack()
				}
			},

			findJobName() {
				uni.showLoading({
					title: '加载中'
				})
				getJobCategory({}).then((res) => {
					this.category = res;
					this.menuActive = this.category[0].id
					this.currentChild = this.category[0].subLevelModelList
					if(this.selectIds.length>0){
						this.getSelect()
					}
				}).catch(() => {
					this.showToast('加载失败', () => {
						uni.navigateBack()
					});
				})
			},
			getSelect(){
				for(let i=0;i<this.selectIds.length;i++){
					const res=this.mapTree(this.category,this.selectIds[i])
					if(res){
						this.$set(this.selectedObj,res.id,res);
					}
				}
			},
			mapTree(nodes,id){
				for (let _i = 0; _i < nodes.length; _i++) {
				    if (nodes[_i].id == id) {
				        return nodes[_i]
				    } else {
				        if (nodes[_i].subLevelModelList && nodes[_i].subLevelModelList.length > 0) {
				            let res = this.mapTree(nodes[_i].subLevelModelList, id);
				            if (res) {
				                return res
				            }
				        }
				    }
				}
				return null
			}
		},
		onLoad(e) {
			this.findJobName();
			this.max = e.max;
			if(e.id){
				this.selectIds=e.id.split(',').filter((item)=>{
					return item!=0
				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.search-block {
			padding: 20rpx 30rpx;
			position: relative;

			.search {
				height: 80rpx;
				width: 100%;
				background: #F6F6F6;
				padding: 0 20rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				border-radius: 40rpx;
			}

			.iconfont.icon-sousuo {
				position: absolute;
				transform: translate(0, -50%);
				top: 50%;
				right: 60rpx;
				font-size: 38rpx;
				font-weight: bold;
				color: #999;
			}
		}

		.category {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;

			.category-block {
				height: calc(100vh - var(--window-bottom) - var(--window-top) - 320rpx);
				overflow-y: scroll;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.first-category-block {
				width: 240rpx;
				border-right: 1px solid #efefef;

				.menu-item {
					display: flex;
					padding: 0 30rpx;
					align-items: center;
					width: 100%;
					color: #313131;
					font-size: 28rpx;
					margin: 20rpx 0;
				}

				.menu-item.active {
					color: #FF7626;
				}
			}

			.second-category-block {
				width: calc(100% - 240rpx);

				.item-list-block {
					width: 100%;
					display: flex;
					flex-direction: column;
					margin-bottom: 20rpx;

					.title {
						font-weight: bold;
						padding: 0 20rpx;
						margin-bottom: 20rpx;
					}

					.item-block {
						width: 100%;
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						padding: 0 10rpx;

						.menu-item {
							padding: 12rpx 30rpx;
							width: calc(50% - 20rpx);
							color: #313131;
							font-size: 26rpx;
							margin: 10rpx;
							background: #F6F6F6;
							border-radius: 10rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							text-align: center;
							//border: 1px solid #F6F6F6;
						}

						.menu-item.active {
							color: #FF7626;
							//border: 1px solid #FF7626;
						}
					}
				}
			}
		}

		.btn-block {
			box-shadow: 0px -5px 20px 0 #efefef;
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 200rpx;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			padding: 20rpx;

			.total-block {
				width: 100%;
				height: 60rpx;
				display: flex;
				align-items: center;
				flex-direction: row;

				.total {
					width: 160rpx;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.total-show {
					width: calc(100% - 160rpx);
					height: 100%;
					overflow-x: scroll;
					padding: 0 10rpx;
					display: flex;
					align-items: center;

					.box {
						display: flex;
						flex-direction: row;
						align-items: center;
					}

					.total-item {
						border: 1px solid #FF7626;
						color: #FF7626;
						font-size: 22rpx;
						margin-right: 20rpx;
						padding: 6rpx 20rpx;
						border-radius: 10rpx;
						white-space: nowrap;
					}
				}
			}

			.btn-content {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: left;
				height: 100rpx;
				padding: 15rpx 0;

				.btn {
					width: calc(50% - 20rpx);
					border-radius: 20rpx;
					font-size: 30rpx;
					background: #F6F6F6;
					color: #313131;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.btn.cancel {
					width: calc(50% - 20rpx);
					margin-right: 40rpx;
				}

				.btn.confirm {
					color: #FF7626;
				}
			}
		}
	}
</style>
